<template>
  <div class="bg">
    <nav-com
      :title="$t('qixinghistory')"
      :showView='showView'
      @back="backHandler()"
    ></nav-com>
    <div class="top-view1">
      <!-- 两端对齐 -->
      <van-cell-group inset class="m-b-10 m-t-10 teshu">
        <van-search
          v-model="value"
          show-action
          label=""
          :placeholder="$t('searchtitle')"
          @search="onSearch"
        >
          <template #action>
            <div @click="onSearch" class="search_btn">{{ $t('search') }}</div>
          </template>
        </van-search>
      </van-cell-group>
      <!-- 两端对齐 -->
      <div class="main-page-wrapper">
        <load-more  :onLoadMore="onLoadMore" :enableLoadMore="enableLoadMore">
          <van-cell-group inset class="m-b-10 m-t-10 teshu" @click="jumpTo('/sportcontent',{canshu:id})">
            <van-cell inset is-link >
              <van-row class="item-content">
                <van-col span="8">2022.09.23</van-col>
                <van-col span="14">
                  08:30:40～09:12:40
                </van-col>
              </van-row>
            </van-cell>
            <div class="group-item">
              <div class="group-item-top">
                <div class="group-item-left">
                  <div><img src="../../assets/management/bianzu@2x.png" alt=""></div>
                  <div class="management_name">{{ $t('qidian') }}:</div>
                </div>
                <div class="group-item-right">
                  深圳市福田区上梅林卓越城二期B 座南区
                </div>
              </div>
              <div class="group-item-top">
                <div class="group-item-left">
                  <div><img src="../../assets/management/bianzu36@2x.png" alt=""></div>
                  <div class="management_name">{{ $t('zhongdian') }}:</div>
                </div>
                <div class="group-item-right">
                  上海市青浦区黄埔卓越城
                </div>
              </div>
              <div class="group-item-content">
                <div class="group-item-content-flex">
                  <div><img class="icon-small" src="../../assets/management/bianzu7@2x.png" alt=""></div>
                  <div>26.4Imperial</div>
                </div>
                <div class="group-item-content-flex">
                  <div><img class="icon-small" src="../../assets/management/bianzu6@2x.png" alt=""></div>
                  <div>12:30:08</div>
                </div>
                <div class="group-item-content-flex">
                  <div><img class="icon-small" src="../../assets/management/bianzu3@2x.png" alt=""></div>
                  <div>3次</div>
                </div>
<!--                <div  class="group-item-content-flex">-->
<!--                  <div><img class="icon-small" src="../../assets/management/bianzu34@2x.png" alt=""></div>-->
<!--                  <div>26kcal</div>-->
<!--                </div>-->
              </div>
            </div>
          </van-cell-group>
          <van-cell-group inset class="m-b-10 m-t-10 teshu">
          <van-cell inset is-link >
            <van-row class="item-content">
              <van-col span="8">2022.09.23</van-col>
              <van-col span="14">
                08:30:40～09:12:40
              </van-col>
            </van-row>
          </van-cell>
          <div class="group-item">
            <div class="group-item-top">
              <div class="group-item-left">
                <div><img src="../../assets/management/bianzu@2x.png" alt=""></div>
                <div class="management_name">{{ $t('qidian') }}:</div>
              </div>
              <div class="group-item-right">
                深圳市福田区上梅林卓越城二期B 座南区
              </div>
            </div>
            <div class="group-item-top">
              <div class="group-item-left">
                <div><img src="../../assets/management/bianzu36@2x.png" alt=""></div>
                <div class="management_name">{{ $t('zhongdian') }}:</div>
              </div>
              <div class="group-item-right">
                上海市青浦区黄埔卓越城
              </div>
            </div>
            <div class="group-item-content">
              <div class="group-item-content-flex">
                <div><img class="icon-small" src="../../assets/management/bianzu7@2x.png" alt=""></div>
                <div>26.4km</div>
              </div>
              <div class="group-item-content-flex">
                <div><img class="icon-small" src="../../assets/management/bianzu6@2x.png" alt=""></div>
                <div>12:30:08</div>
              </div>
              <div class="group-item-content-flex">
                <div><img class="icon-small" src="../../assets/management/bianzu3@2x.png" alt=""></div>
                <div>3次</div>
              </div>
<!--              <div  class="group-item-content-flex">-->
<!--                <div><img class="icon-small" src="../../assets/management/bianzu34@2x.png" alt=""></div>-->
<!--                <div>26kcal</div>-->
<!--              </div>-->
            </div>
          </div>
        </van-cell-group>
        </load-more>
      </div>

    </div>
  </div>
</template>
<script>
import { Toast } from 'vant';
import navCom from "@/components/nav-com.vue";
import loadMore from "@/components/loadmore.vue";
export default {
  name: "bonusList",
  components: {
    navCom,
    loadMore
  },
  data() {
    return {
      page: 1,
      enableLoadMore: true,
      searchValue:'',
      checked:true,
      showView: true,
      title: "骑行记录",
      showPage:true,
      lichengValue:"",
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    jumpTo(url){
      this.$router.push(url)
    },
    onPageConfirm(){

    },
    //返回
    backHandler() {
      const nav = navigator.userAgent;
      if (nav.indexOf('Android') > -1 || nav.indexOf('Adr') > -1) {
        phone.onBackPress();
      } else if (!!nav.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        this.$bridge.callhandler('onBackPress', {}, res => {});
      }else{
        this.$router.go(-1);
      }
    },
    clearHistory(){
      this.$toast('清理缓存成功');
    },
    //初始化
    init() {

    },
    onSearch(){

    },
    onLoadMore(done) {
      setTimeout(()=>{
        if(!this.enableLoadMore) {
          return
        }
        this.page = this.page + 1
        this.onSearch();
        done();
      }, 200)
    },
  },
};
</script>
<style lang="scss" scoped>
.top-view1{
  margin-top: 26.23vw;
}
.bg{
  background: #F8F8F8;
}
.m-b-10{
  margin-bottom: 10px;
}
.m-t-10{
  margin-top: 10px;
}
.van-cell__title, .van-cell__value {
  flex: 1;
  display: flex;
  align-items: center;
}
.teshu{
}
.search_btn{
  width: 56px;
  background: linear-gradient(90deg, #1ED6C2 0%, #00DEA1 100%);
  color:#fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.van-search__action{
  padding: 0;
}
.van-search{
  padding: 0;
}
.top-title{
  color: #fff;
  .title{
    padding: 0rem 0rem 0px 0.42667rem;
    font-size: 22px;
    font-family:PingFang, PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
  }
  .sub-title{
    padding: 0rem 0rem 0px 0.42667rem;
    font-size: 16px;
    font-family:PingFang, PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    margin-top: 10px;
  }
  .right-img{
    width: 135px;
  }
}
.wenti{
  font-size: 22px;
  font-family:PingFang, PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #303030;
  margin: 0px 0.42667rem;
  border-bottom: 0.02667rem solid #ebedf0;
  padding: 10px 0 15px;
}
.group-item{
  display: flex;
  flex-direction: column;
  padding:0 15px 15px;
  .group-item-top{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 10px;
    &:first-child{
      padding: 10px 0;
    }
    .group-item-left{
      display: flex;
      align-items: center;
      div{
        display: flex;
        align-items: center;
      }
      img{
        width: 15px;
        margin-right: 10px;
      }
      .management_name{
        font-size: 14px;
        font-family:PingFang, PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #303030;
      }
    }
    .group-item-right{
      display: flex;
      justify-content: flex-start;
      width: 77%;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #303030;
    }
  }
  .group-item-content{
    border-top: 0.02667rem solid #ebedf0;
    padding-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .group-item-content-flex{
      display: flex;
      align-items: center;
      .icon-small{
        width: 15px;
        margin-right: 4px;
      }
      div{
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #808080;
      }
    }
    .group-item-content-right{
      text-align: right;
    }
  }
}
.item-content{
  width: 100%;
}
.van-search__content {
  background-color: #EEEEEE;
}
</style>
